<template>
    <div>
        <!-- 轮播图 -->
        <el-carousel height="550px">
        <el-carousel-item v-for="(item, index) in Images" :key="index">
            <el-image :src="item" style="width: 100%; height: 100%"></el-image>
        </el-carousel-item>
        </el-carousel>
        <div class="_null"> </div>
        <!-- 业务导航 -->
        <div class="nav_title">业务导航</div>
        <div class="nav_list flex justify-between">
            <div class="item" v-for="item,index in list" :key="index">
                <div class="item_title">
                    <el-image class="icon" src="../src/assets/images/home/Frame25@2x.jpg"></el-image>
                    {{ item.name }}
                    <el-image class="icon" src="../src/assets/images/home/xiushi@2x.jpg"></el-image>
                </div>
                <div class="item_label">
                    <span>{{ item.label }}</span>
                </div>
                <el-image style="width:100%;" :src=item.img></el-image>
                <div class="text">
                    <text>{{ item.text }}</text>
                </div>
                <div class="outer">了解更多→</div>
            </div>
            
        </div>
        <!-- 数据墙 -->
        <div class="shuju">
            <el-image src="../src/assets/images/home/业务导航@2x.jpg"></el-image>
        </div>
        
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";

const Images = reactive([
  "../src/assets/images/home/sprice.jpg",
  "../src/assets/images/home/sprice.jpg",
  "../src/assets/images/home/sprice.jpg",
  "../src/assets/images/home/sprice.jpg",
]);

const list = reactive([
    {
        name:'商超零售',
        label:'民生服务典范',
        img:'../src/assets/images/home/nav01@2x.jpg',
        text:'中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。'
    },
    {
        name:'物业租赁',
        label:'全业态资产管家',
        img:'../src/assets/images/home/nav02@2x.jpg',
        text:'中兴贸易整合超100万㎡优质物业资源，涵盖：智造厂房、物流仓库、黄金铺面、甲级写字楼。30年专业运营团队提供选址评估、改造咨询、法务支持等全周期服务，累计服务超500家企业客户，空置率长期低于行业平均水平15%。欢迎联系获取定制化租赁方案。'
    },
    {
        name:'车辆设备',
        label:'重型装备一站式解决方案',
        img:'../src/assets/images/home/nav03@2x.jpg',
        text:'中兴贸易拥有200+台专业设备矩阵，覆盖工程全场景需求，有工程机（械土方系列、起重运输、特种作业）运输车队（普货运输、特种运输），灵活租售模式（长租/短租/以租代购），累计为粤港澳大湾区300+工程项目提供设备支持，年均出勤率达95%，助力客户降本增效！'
    },
    {
        name:'运输队',
        label:'全场景运力保障专家',
        img:'../src/assets/images/home/nav04@2x.jpg',
        text:'中兴贸易组建80+台标准化运输车队，配备主力车型（普货运输、特种运输、工程协同、道路救援）覆盖珠三角200+条干线运输网络，提供零担或整车运输、 设备联动作业、紧急故障车辆拖移服务。累计安全行驶里程超500万公里，获评"广东省四星级货运企业"，24小时调度热线保障，让货物安全准时抵达每一程。'
    },
])
</script>
<style lang="less" scoped>
@import "@/assets/css/common.css";

._null{
    height: 20px;
}
//业务导航
.nav_title{
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    text-align: center;
    
}
.nav_list{
    margin-bottom: 80px;
    padding: 0 100px;
    .item{
        text-align: center;
        border-radius: 8px;
        padding: 20px;
        background: #FFF1ED;
        width: 21%;
        .item_title{
            font-size: 24px;
            .content{
                display: inline-block;
            }
            .icon{
                width: 60px;
                transform: translate(0,12px);
            }
        }
        .item_label{
            margin-bottom: 18px;
            margin-top: 4px;
            span{
                padding: 1px 15px;
                border-radius: 10px;
                font-size: 14px;
                background: #EB3C03;
                color: #FFF1ED;
            }
        }
        .text{
            height: 180px;
            overflow: hidden;
            margin-top: 10px;
            font-size: 13px;
            color: #333333;
            text-align: start;
            text{
                line-height: 1.8;
            }
        }
        .outer{
            height: 40px;
            line-height: 40px;
            text-align: end;
            font-size: 13px;
            font-weight: bold;
            color: #EB3C03;
        }
    }
}
// 数据墙
.shuju{
    background: #EB3C03;
}

</style>